<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API列表 - API文档管理系统</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 错误信息显示 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- API列表 -->
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-list"></i>
                            API列表
                        </h5>
                    </div>
                    <div class="col-md-6 text-end">
                        <a th:href="@{/api-doc/create}" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i>
                            新增API
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div th:if="${apis == null or apis.empty}" class="text-center p-5">
                    <i class="bi bi-book fs-1 text-muted"></i>
                    <p class="text-muted mt-2">暂无API文档</p>
                    <a th:href="@{/api-doc/create}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i>
                        创建第一个API文档
                    </a>
                </div>
                
                <div th:if="${apis != null and not #lists.isEmpty(apis)}">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>API名称</th>
                                    <th>请求方法</th>
                                    <th>API路径</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="api : ${apis}">
                                    <td th:text="${api.id}">1</td>
                                    <td>
                                        <a th:href="@{/api-doc/detail/{id}(id=${api.id})}" th:text="${api.name}">
                                            API名称
                                        </a>
                                    </td>
                                    <td>
                                        <span th:class="'badge bg-' + ${api.method == 'GET' ? 'success' : (api.method == 'POST' ? 'primary' : (api.method == 'PUT' ? 'warning' : (api.method == 'DELETE' ? 'danger' : 'secondary')))}" 
                                              th:text="${api.method}">
                                            GET
                                        </span>
                                    </td>
                                    <td th:text="${api.path}">/api/v1/example</td>
                                    <td th:text="${#temporals.format(api.createTime, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a th:href="@{/api-doc/detail/{id}(id=${api.id})}" 
                                               class="btn btn-outline-primary" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a th:href="@{/api-doc/edit/{id}(id=${api.id})}" 
                                               class="btn btn-outline-secondary" title="编辑">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a th:href="@{/api-doc/test/{id}(id=${api.id})}" 
                                               class="btn btn-outline-info" title="测试">
                                                <i class="bi bi-lightning"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-danger" 
                                                    data-toggle="modal" data-target="#deleteModal" 
                                                    th:attr="data-id=${api.id}" title="删除">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个API文档吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script>
        // 确保DOM加载完成后添加事件监听器
        $(document).ready(function() {
            // 为删除按钮添加点击事件
            $('button[data-toggle="modal"]').on('click', function() {
                const id = $(this).data('id');
                $('#confirmDeleteBtn').data('id', id);
            });
            
            // 确认删除按钮点击事件
            $('#confirmDeleteBtn').on('click', function() {
                const id = $(this).data('id');
                if (id) {
                    // 发送删除请求
                    $.post('/api-doc/delete/' + id)
                        .done(function() {
                            // 重新加载页面
                            location.reload();
                        })
                        .fail(function() {
                            alert('删除失败');
                            $('#deleteModal').modal('hide');
                        });
                }
            });
        });
    </script>
</body>
</html>